<template>
  <div>
    <div class="list-top">
      <div class="list-top-right">
        <span v-if="isShop == 1">
          比赛门店
          <el-select v-model="searchData.shopName" size="small" class="search-input">
            <el-option
              v-for="(item,key) in shopList"
              :key="key"
              :label="item.shopName"
              :value="item.shopId"
            ></el-option>
          </el-select>
        </span>
        <!-- 宝宝年龄   暂时去掉
        <el-select v-model="searchData.babyAge" size="small" class="search-input">
          <el-option v-for="(item,key) in ageList" :key="key"></el-option>
        </el-select>-->

        <el-button type="primary" size="small" @click="onSearch" v-if="isShop == 1">查询</el-button>
        <el-button type="primary" size="small" @click="onFinish" v-if="isEnding">结束比赛,颁发奖品</el-button>
      </div>
    </div>
    <el-table :data="tableData" stripe style="width: 98%">
      <el-table-column prop="activityCode" label="序号" width="50">
        <template slot-scope="scope">{{scope.$index+ pageSize*(currentPage-1) +1}}</template>
      </el-table-column>
      <el-table-column prop="phone" label="报名账户"></el-table-column>
      <el-table-column prop="linkPhone" label="联系方式"></el-table-column>
      <el-table-column prop="babyName" label="宝宝姓名"></el-table-column>
      <el-table-column prop="age" label="宝宝年龄">
        <template slot-scope="scope">{{scope.row.age}}个月</template>
      </el-table-column>
      <el-table-column prop="shopName" label="比赛门店"></el-table-column>
      <el-table-column prop="calories" label="比赛成绩">
        <template slot-scope="scope">
          <span v-if="scope.row.calories">{{scope.row.calories}}(千卡)</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="resultMessage" label="颁奖结果"></el-table-column>
    </el-table>
    <div class="pageblock">
      <el-button size="small" type="primary" @click="toPage">确定</el-button>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5,10,15,20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
      ></el-pagination>
    </div>
    <div id="qrcode" v-show="false"></div>
  </div>
</template>
<script>
import util from "@/util";
import s from "@/util/state";
import QRCode from "qrcodejs2";
import { macthRanking, listMatchShop, matchOver, getMatch } from "@/api";
import { mapState } from "vuex";
export default {
  computed: mapState(["sub", "power", "merchantId", "isShop"]),
  components: {
    QRCode: QRCode
  },
  data() {
    return {
      searchData: {
        shopName: "",
        babyAge: ""
      },
      shopList: [],
      ageList: [
        {
          value: "0~6个月",
          key: 1
        }
      ],
      pageSize: 10,
      currentPage: 1,
      totalNum: 0,
      tableData: [],
      isEnding: true,
      endTime: ""
    };
  },
  mounted() {
    this.getShopList();
  },
  methods: {
    // 获取比赛门店列表
    getShopList() {
      this.shopList = [];
      listMatchShop().then(res => {
        this.shopList = res.data;
        this.searchData.shopName = res.data[0].shopId;
        this.getmatchInfo();
      });
    },
    // 获取比赛的信息(结束时间)
    getmatchInfo() {
      let data;
      if (this.isShop == 1) {
        data = { shopId: this.searchData.shopName };
      } else {
        data = { shopId: this.merchantId };
      }
      getMatch(data).then(res => {
        this.endTime = res.data.matchEndTime;
        let now = Date.now();
        if (this.endTime < now) {
          this.isEnding = false;
        } else {
          this.isEnding = true;
        }
        if (res.data.status == 2) {
          this.isEnding = false;
        }
        this.getAchivementList();
      });
    },
    onSearch() {
      this.getmatchInfo();
    },
    // 获取当前门店的比赛成绩列表
    getAchivementList() {
      let data = {
        type: "A",
        pageNum: this.currentPage,
        pageSize: this.pageSize
      };
      if (this.isShop == 1) {
        data.shopId = this.searchData.shopName;
      } else {
        data.shopId = this.merchantId;
      }
      macthRanking(data).then(res => {
        if (res.code == 200) {
          this.totalNum = res.data.pageTotal;
          this.tableData = res.data.matchResultDetails;
        }
      });
    },
    toPage(val) {
      this.currentPage = val;
      this.getAchivementList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAchivementList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getAchivementList();
    },
    //  手动结束比赛
    onFinish() {
      let endTime = util.forDateAndTime(this.endTime);
      this.$confirm(
        "该年龄段宝宝比赛结束时间为" +
          endTime +
          ",与预设的不吻合,是否结束比赛？",
        "确定比赛已结束",
        {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          let data = {};
          if (this.isShop == 1) {
            data.shopId = this.searchData.shopName;
          } else {
            data.shopId = this.merchantId;
          }
          matchOver(data).then(res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "操作成功"
              });
              this.isEnding = true;
            }
            this.getAchivementList();
          });
        })
        .catch(() => {});
    }
  }
};
</script>
<style  lang="less" scoped>
.list-top {
  padding: 20px 10px;
  display: flex;
  justify-content: space-between;
  .list-top-right {
    width: 80%;
  }
}
.search-input {
  width: 12%;
  margin: 0 5px 0;
}
.pageblock {
  box-sizing: border-box;
  padding-right: 10px;
  .el-button {
    float: right;
  }
}
</style>
